<template>
    <div class="bar-box">
        <div class="bar-list">
            <div class="bar-item" :class="{'selected':thisactive===1?true:false}" @click="go('/')">
                <van-icon class="icon" name="todo-list-o" />
                <span class="title">待办</span>
            </div>
            <div class="bar-item" :class="{'selected':thisactive===3?true:false}" @click="go('/oa')">
                <van-icon class="icon" name="apps-o" />
                <span class="title">OA</span>
            </div>
            <div class="bar-item" :class="{'selected':thisactive===4?true:false}" @click="go('/user')">
                <van-icon class="icon" name="manager-o" />
                <span class="title">个人中心</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "Footer",
    props:['active'],
    data() {
        return {
            thisactive:0
        }
    },
    created() {
        this.thisactive = this.active;
    },
    methods:{
        go(path) {
            this.$push(path);
        }
    }
}
</script>
<style lang="less">
@import '../../css/var.less';
.bar-list {
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:50px;
    padding:0 @space;
    box-sizing: border-box;
    background:#fff;
    display:flex;
    flex-direction: row;
    justify-content:space-between;
    align-items:center;
    padding:0 30px;
    border-top: 1px solid #eee;
    .bar-item {
        height: 100%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        .icon {
            font-size:20px;
        }
        .title {
            margin-top:3px;
            font-size:12px;
        }
    }
    .selected {
        color:@color;
    }
}
</style>